<template>
  <div class="job-box flex-center-col-start">
    <div class="job-head flex-center-row">
      <job-menu @changeMenu="handleMenuChange"></job-menu>

    </div>
    <div class="flex-center-row-end" style="width: 100%">
      <div class="flex-center-row-end" style="width: 50%;font-size: 14px">
        <el-statistic :value="jobList?jobList.length:'0'" :value-style="{color:'tomato'}" title="任务数量">
          <template slot="suffix">
              <i class="el-icon-date" style="color:teal"></i>
          </template>
        </el-statistic>
      </div>
    </div>
    <ul class="infinite-list job-container" style="padding: 0 50px 0 50px" v-infinite-scroll="handleScroll">

      <el-empty description="暂无内容" v-show="showEmpty"></el-empty>
      <li class="infinite-list-item job-item" v-for="(item,index) in jobList">
        <JobItem :job="{
                    index:index,
                    ...item
                  }"
                 @collectJob="handleCollectJob"
                 @deleteJob="handleDeleteJob"
                 @handleUpdate="handleUpdateJob"></JobItem>
      </li>
    </ul>
  </div>
</template>

<script>
  import JobItem from "../../components/content/JobItem";
  import JobMenu from "../../components/menu/JobMenu";
  import {jobApi} from "../../assets/api/jobApi";

  import {parseJob} from "../../util/jobUti";

  export default {
    name: "Job",
    components: {
      JobMenu,
      JobItem
    },
    data() {


      return {
        showEmpty: true,
        jobList: [
          {
            // CreatedAt
            // DeletedAt
            // ID
            // UpdatedAt
            // classify
            // collect
            // index
            // name
            // note
            // user_id
            expire: new Date()
          }
        ]
      }
    },
    methods: {
      check(startup) {
        this.showEmpty = !this.jobList || this.jobList.length === 0;
        if (startup) {
          this.showEmpty |= startup
        }

      },
      handleScroll() {

      },
      handleMenuChange(menu) {

        if (menu.handle) {

          menu.handle().then(resp => {
            if (resp.code === 200) {

              this.jobList = parseJob(resp.data.jobList);

            }
            this.check()
          })
        } else {
          this.jobList = []
          this.check()
        }

      },
      handleDeleteJob(jobItem) {


        // test
        this.jobList.splice(jobItem.index, 1)
        // 提示消息
        this.$notify({
          title: '成功',
          message: '删除任务成功',
          type: 'success'
        });

        // work
        // jobApi.deleteOneJob(jobItem.ID).then(resp=>{
        //   if(resp.code === 200){
        //     // 移除数组中内容
        //     this.jobList.splice(jobItem.index,1)
        //     // 提示消息
        //     this.$notify({
        //       title: '成功',
        //       message: '删除任务成功',
        //       type: 'success'
        //     });
        //   }
        // })
      },
      // 修改处理
      handleUpdateJob(jobItem) {


      },
      // 收藏处理
      handleCollectJob(jobItem) {

        jobApi.collectOneJob(jobItem.ID, jobItem.collect).then(resp => {
          if (resp.code === 200) {
            // 修改前端数据，即使显示
            let job = this.jobList[jobItem.index]
            job.collect = !job.collect
            if (job.collect) {
              this.$notify({
                title: '🔒成功',
                // 🐻🎆🎇❌💔🔓🔒
                message: '🎆收藏成功',
                type: 'success',
                duration:1000
              });
            } else {
              this.$notify({
                title: '🔓成功',
                message: '💔取消收藏',
                type: 'success',
                duration:1000
              });
            }
          } else {
            this.$notify({
              title: '失败',
              message: '收藏失败',
              type: 'error'
            });
          }
        })

      },
      initJobList() {

        jobApi.getAllJobByUserId(1).then(resp => {
          if (resp.code === 200) {

            this.jobList = parseJob(resp.data.jobList)

          }
          this.check()
        });


      },


    },
    mounted() {
      this.jobList = this.initJobList()
    }
  }
</script>

<style lang="less" scoped>
  .job-box {
    width: 100%;
    height: 100%;

    .job-head {
      width: 100%;
    }

    .job-container {
      width: 80%;
      overflow: auto;

      .job-item {
        margin: 10px 0 10px 0;
      }
    }
  }
</style>
